<template>
	<view>

		<view class="u-page">
			
			<view v-if="current==0" id="videos">
				<image class="bgs" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/19.png" mode="">
				</image>
				<view class="bgblur"></view>
				<view class="banner">
					<u-sticky bgColor="none">
						<view :class="[hasbg?'bgs1':'']">
							<view @click="searchList" class="search">
								<!-- <u-input style="width: 100%; color: #fff;" placeholder="请输入需要搜索的视频" v-model="keyword" type="text"  /> -->
								<text>搜索你想要的好玩，这儿都有～</text>
								<div class="icon">
									<image   class="imgs"
										src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/8.png" mode="">
									</image>
								</div>
							</view>
						</view>
					</u-sticky>
				</view>
				<!-- tab -->
				<u-sticky offset-top="92" bgColor="none">
					<view :class="[hasbg?'bgs1':'']">
						<u-tabs height="60" class="tabs" bg-color="none" font-size="28" active-color="#fff" :bar-style="barSty"
							:active-item-style="ActiveStyle" inactive-color="#fff" :list="VideocategoryList" :current="Videocurrent"
							@change="change">
						</u-tabs>
					</view>
				</u-sticky>
				<view v-if="list1.length" class="">
					<videos :list1="list1"  />
					<uni-load-more :status="status"></uni-load-more>
				</view>
				<view v-else class="empty">
					<u-empty src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/nodata!.png" v-if="!list1.length && senDate"
						text="暂无数据" mode="list"></u-empty>
				</view>
			</view>
			
			<view id="photos"  v-else-if="current==2" >
				<photos :scrollVal="scrollVal"/>
			</view>
			
	
			<imgs :scrollVal="scrollVal" v-else />
		</view>

		<view class="tabbars">
			<view class="item" v-for="(item,index) in list" @click="tab(item,index)">
				<image v-if="item.sel" :src="item.iconPath" mode=""></image>
				<image v-else :src="item.selectedIconPath" mode=""></image>
				<text :class="[item.sel?'':'sel']">{{item.text}}</text>
			</view>
		</view>
	</view>
</template>
<script>
	import videos from "./video.vue"
	import photos from "./photo.vue"
	import imgs from "./imgs.vue"
	export default {
		components: {
			videos,
			photos,
			imgs
		},
		
		onPageScroll(e) { //uniapp自带的监听滚动条方法
			console.log(e);
			this.scrollVal = e.scrollTop
			if(this.current==0){
				if (e.scrollTop >= 100) {
					this.hasbg = true
				} else {
					this.hasbg = false
				}
			}

		},
		data() {
			return {
				id:"",
				keyword:"",
				Videocurrent: 0,
				ActiveStyle: {
					fontSize: '32rpx',
				},
				barSty: {
					width: '50rpx',
					height: '5rpx',
					background: '#68C3C9'
				},
				VideocategoryList:[{
					name: '推荐',
					icon: 'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/17.png'
				}, {
					name: '最新',
					icon: 'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/18.png'
				}, {
					name: 'VIP专区'
				}, {
					name: '星空'
				}, {
					name: '海边'
				}, {
					name: '春天的花花'
				}],
				
				hasbg: false,
				total: null, //总共多少条数据
				formData: {
					pageSize: 10, //每页10条数据
					page: 1, //第几页
					topic: "",
				},
				status: "more",
				senDate: false,
				list1: [],
				categoryList:[],
				sortId:"",
				types: 'recommend',
				scrollVal: 0,
				list: [{
						iconPath: "https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/a1.png",
						selectedIconPath: "https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/a2.png",
						text: '视频',
						customIcon: false,
						sel: false
					},
					{
						iconPath: "https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/a3.png",
						selectedIconPath: "https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/a4.png",
						text: '图文',
						customIcon: false,
						sel: true
					},

					{
						iconPath: "https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/a5.png",
						selectedIconPath: "https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/a6.png",
						text: '头像',
						customIcon: false,
						sel: true
					}
				],
				
				// video：视频定制
				// image：图文
				// avatar：头像
				current: 0
			}
		},
		onLoad(e) {
		
			console.log(e.type,'*************');
			this.id  =e.id
			
			if(e.type=='video'){
				this.current = 0
				
				// 获取分类列表
				this.FngetVideos();
			}else if(e.type=='image'){
				this.current = 1
			}else{
				this.current = 2
			}
			this.list?.map(r=>{
				this.$set(r,'sel',true)
			})
			this.list[this.current].sel = false
			
			console.log(this.list,8888888888);
			
		},
		onReachBottom() {
			let allTotal = this.formData.page * this.formData.pageSize;
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.status = "loading"; //加载中状态
				this.formData.page++;
		
				this.getlist();
		
			} else {
				this.status = "noMore"; //加载完状态
				console.log("已加载全部数据");
			}
		},
		methods: {
			// 视频搜索
			searchList(){
				uni.navigateTo({
					url: '/subpackFind/search'
				})
				
			},
			// 视频tab切换
			change(index){
				this.Videocurrent = index;
				this.formData.page=1
				this.sortId =  this.VideocategoryList[this.Videocurrent]?.id
				this.types = this.VideocategoryList[this.Videocurrent]?.types
				this.list1=[]
				this.getlist()
			},
		
			// 获取图集列表
			getlist() {
				this.senDate = false;
				this.$u.api.video.getVideoList({
						sortId: this.sortId,
						page:this.formData.page,
						size: this.formData.pageSize,
						types: this.types,
						appletId: this.vuex_appletId
					})
					.then((res) => {
						this.senDate = true;
						if (res.code == 200) {
							this.total = res.data.total;
							this.list1 = this.list1.concat(res.data.list);
		
							if (this.list1.length < this.formData.pageSize) {
								this.status = "noMore"; //加载完状态
							}
						} else {
							console.log("请求数据失败");
						}
					});
			},
			// 获取分类列表
			FngetVideos() {
				this.$u.api.video.getVideos({appletId: this.vuex_appletId,id:this.id}).then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg);
						return;
					}
					this.VideocategoryList = res.data?.map(r=>{
						let icon = '';
						if(r.types=='recommend'){
							icon = 'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/17.png'
						}else if(r.types=='new'){
							icon = 'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/find/18.png'
						}else{
							icon = ''
						}
						return{
							...r,
							name:r.sort_name,
							icon
						}
					})
					this.sortId = this.VideocategoryList[this.Videocurrent]?.id
					// 获取图集列表
					this.getlist()
				})
			},
			
			tab(item, index) {
				console.log(item, 3333,this.current);
				this.current = index
				this.list.map(r => r.sel = true)
				item.sel = false
				
				let cur = undefined
				this.list.map((r,index)=>{
					if(!r.sel){
						cur = index
					}
				})
				
				
				if(cur==0){
					// 获取分类列表
					this.FngetVideos();
				}
				
				
				
				
				
				
				this.scrollVal = 0
				uni.pageScrollTo({
					scrollTop: 0, //距离页面顶部的距离
					duration: 0
				});

				
				
			}
		},
	}
</script>
<style scoped lang="scss">
	#videos{
		/deep/ .u-input__input{
			color: #fff !important;
		}
		.bgs {
			width: 100%;
			height: 283rpx;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			z-index: -1;
		}
		.banner {
		
			padding-top: 86rpx;
		
			.search {
				position: relative;
		
		
				padding-left: 48rpx;
				font-size: 28rpx;
				font-family: PingFang SC,
					PingFang SC;
				font-weight: 300;
				color: #FFFFFF;
				display: flex;
				align-items: center;
		
				margin: 0 auto 30rpx;
				width: 702rpx;
				height: 92rpx;
				background: rgba(255, 255, 255, 0.06);
				border-radius: 53rpx;
				opacity: 1;
		
				.icon {
					position: absolute;
					right: 0;
					top: 0;
					z-index: 3;
					width: 92rpx;
					height: 92rpx;
					background: #8CC950;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
		
					.imgs {
						width: 51rpx;
						height: 51rpx;
					}
				}
			}
		}
		
		.bgs1 {
			overflow: hidden;
			width: 100%;
			background: rgba(19, 20, 32, 1);
			z-index: 8;
		}
		
		.bgblur {
			backdrop-filter: blur(8px);
			width: 330rpx;
			height: 92rpx;
			position: absolute;
			right: 50rpx;
			top: 86rpx;
			border-radius: 53rpx;
		}
		
	}
	.u-page {
		padding-bottom: 180rpx;
	}

	.tabbars {
		padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		// height: 158rpx;
		padding-top: 28rpx;
		left: 0;
		right: 0;
		bottom: 0;
		background: #131420;
		z-index: 88;

		.item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			font-family: PingFang HK, PingFang HK;
			font-weight: 400;
			color: #4D4C6D;
			line-height: 30rpx;

			.sel {
				color: #5B89FF !important;
			}

			image {
				margin-right: 14rpx;
				width: 58rpx;
				height: 58rpx;
			}
		}

	}

	page {

		background: #131420;
	}
</style>
